<template>
  <div class="Car">
    <Head msg="新车列表" backimg="1"></Head>
    <img class="home-menu" src="../../public/img/icons/icon-refresh.png" @click="initlist" />

    <div class="car-search">
      <div class="search-title">快速找车:</div>
      <div class="search-body">
        <div class="search-input" placeholder="请选择品牌车系" readonly :value="brankinfo ? brankinfo.name : ''" @click="brandclose">
          {{ brankinfo ? brankinfo.name : '请选择品牌车系' }}
        </div>
        <div class="search-btn" @click="reGoodsList(1)">搜索</div>
      </div>
    </div>

    <div class="scroll-main">
      <cube-scroll ref="scrollmain" :data="goodsList" :options="options" @pulling-up="getGoodsList">
        <div v-if="classifyshow && setparam.length>0" class="classify-main">
          <div class="classify-list" v-for="(item, index) in setparam" :key="index">
            <template v-if="item.values.length > 0">
              <div class="classify-type-name">{{ item.attr_name }}：</div>
              <div class="classify-type">
                <div class="classify-type-list" :class="{ 'classify-type-active': allstatus[index] == 1 }" @click="allchange(index)">
                  全部
                </div>
                <div class="classify-type-list" :class="{ 'classify-type-active': res.active == 1 }" v-for="(res, idx) in item.values" @click="typechange(index, idx)" :key="idx">
                  {{ res.attr_value }}
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="price-classify-main">
          <div class="price-classify-title">共{{ total }}条车源</div>
          <div class="price-classify-body">
            <div class="price-classify-title">经销商价格排序：</div>
            <cube-select v-model="pricevalue" :options="['默认排序', '价格从低到高', '价格从高到低']" @change="pricechange"></cube-select>
          </div>
        </div>

        <div class="car-main">
          <div class="car-list" v-for="item in goodsList" :key="item.goods_id">
            <img :src="item.goods_thumb" class="car-pic" />
            <div class="car-content">
              <div class="car-title" @click="godetail(item.goods_id)">
                {{ item.goods_name }}
              </div>
              <!--                            <div class="car-type" v-for="res in item.paramList[0].param_list">{{res.param_name}}：<span-->
              <!--                                    class="car-type-name">{{res.param_value}}</span></div>-->
              <div class="car-type">
                外观颜色：
                <span class="car-type-name">{{ item.setparam.out_color }}</span>
              </div>
              <div class="car-type">
                内饰颜色：
                <span class="car-type-name">{{ item.setparam.in_color }}</span>
              </div>
              <div class="car-type">
                排放标准：
                <span class="car-type-name">{{ item.setparam.emission }}</span>
              </div>
              <div class="car-type">
                车辆类型：
                <span class="car-type-name">{{ item.setparam.type }}</span>
              </div>
              <div class="car-type">
                车所在地：
                <span class="car-type-name">{{ item.setparam.area }}</span>
              </div>
              <!--                            <div class="car-type">车源有效期限：<span class="car-type-name">{{item.setparam.end_time}}</span>-->
              <!--                            </div>-->
              <div class="car-type">
                指导价格：
                <span class="car-type-name">{{ item.market_price }}万</span>
              </div>
              <div class="car-type">
                经销商价：
                <span class="car-type-name">{{ item.goods_price }}万</span>
              </div>
            </div>
            <div class="car-detail-btn" @click="godetail(item.goods_id)">
              查看汽车详情
            </div>
          </div>
        </div>
      </cube-scroll>
    </div>
    <div v-if="brand" class="brand-head">
      <img class="brand-head-pic" src="../../public/img/icons/icon-left.png" @click="brandback" />
      <div>{{ brankinfo.name ? brankinfo.name : '选择品牌' }}</div>
    </div>

    <!-- 品牌车系模态框 -->
    <!--        <cube-scroll ref="brandModelScroll"-->
    <!--                     :data="brandList"-->
    <!--                     class='brand-model'-->
    <!--                     :class='brand?"brand-active":""'-->
    <!--        >-->

    <!--            <div class='mine-list' style='background:white;'>-->
    <!--                <div class='mine-list-list-left' @click='brandclear' >-->
    <!--                    <div class='mine-list-list-left-name' style="margin: 0">不限品牌</div>-->
    <!--                </div>-->
    <!--                <div class='mine-list-list-left' v-for='(item,index) in brandList' @click='brandclick(index)'>-->
    <!--                    <div class='mine-list-list-left-img'>-->
    <!--                        <img :src='item.image'>-->
    <!--                    </div>-->
    <!--                    <div class='mine-list-list-left-name' :class="brandindex==index?'color-active':''">{{item.mobile_name}}</div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </cube-scroll>-->
    <!--        <cube-scroll-->
    <!--                ref="brandChildScroll"-->
    <!--                :data="brandListchild"-->
    <!--                class='brand-child'-->
    <!--                :class='brand&&brandchlid?"brand-child-active":""'>-->
    <!--            <div class='mine-list-list-left' @click='brandchildclick(-1)'>-->
    <!--                <div class='mine-list-list-left-name' style="margin-top: 45px">不限车系</div>-->
    <!--            </div>-->
    <!--            <div class='mine-list-list-left' :class="item.is_blod==1?'line-active':''" v-for='(item,index) in brandListchild' @click='brandchildclick(index)'>-->
    <!--                <div class='mine-list-list-left-name' >{{item.mobile_name}}</div>-->
    <!--            </div>-->
    <!--        </cube-scroll>-->

    <cube-scroll ref="brandModelScroll" :data="brandListToList" class="brand-model" :class="{ 'brand-active': brand }">
      <div class="mine-list" style="background:white;">
        <div class="mine-list-list-left" @click="brandclear">
          <div class="mine-list-list-left-name" style="margin: 0">不限</div>
        </div>
        <div v-for="(items, key) in brandList" :key="key">
          <div v-if="backinfo.p_level == 0" :id="key" class="letter-title">
            {{ key }}
          </div>
          <template v-if="backinfo.p_level == 0">
            <div class="mine-list-list-left" v-for="(item, index) in items" @click="brandclick(item)" :style="item.is_blod == 1 ? 'border-bottom: 10px solid #efeff4;' : ''" :key="index">
              <div style="display: flex;align-items: center">
                <div class="mine-list-list-left-img">
                  <img :src="item.image" />
                </div>
                <div
                  class="mine-list-list-left-name"
                  :class="{
                    'color-active': brandindex == index,
                    blod: item.is_blod == 1,
                  }"
                >
                  {{ item.mobile_name }}
                </div>
              </div>
            </div>
          </template>

          <div v-if="backinfo.p_level != 0 && backinfo.p_level != 3" class="mine-list-list-left" @click="brandclick(items)" :style="items.is_blod == 1 ? 'border-bottom: 10px solid #efeff4;' : ''">
            <div style="display: flex;align-items: center">
              <div
                style="margin-left: 0"
                class="mine-list-list-left-name"
                :class="{
                  'color-active': brandindex == index,
                  blod: items.is_blod == 1,
                }"
              >
                {{ items.mobile_name }}
              </div>
            </div>
            <div style="color: #888;font-size: .8rem">{{ items.car_sum ? items.car_sum : 0 }} ></div>
          </div>

          <div v-if="backinfo.p_level == 3" class="letter-title">
            {{ items.name }}
          </div>
          <template v-if="backinfo.p_level == 3">
            <div class="mine-list-list-left" v-for="(item, index) in items.child" @click="brandclick(item)" :style="item.is_blod == 1 ? 'border-bottom: 10px solid #efeff4;' : ''" :key="index">
              <div style="display: flex;align-items: center">
                <div
                  style="margin-left: 0"
                  class="mine-list-list-left-name"
                  :class="{
                    'color-active': brandindex == index,
                    blod: item.is_blod == 1,
                  }"
                >
                  {{ item.mobile_name }}
                </div>
              </div>
              <div style="color: #888;font-size: .8rem">{{ item.car_sum ? item.car_sum : 0 }} ></div>
            </div>
          </template>
        </div>
      </div>
    </cube-scroll>

    <div v-if="brand && backinfo.p_level == 0" class="brand-link">
      <div class="active">选</div>
      <div :key="key" v-for="(items, key) in brandList" :class="{ active: letternumber == key }" @click="scrollTo(key)">
        {{ key }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Head from '@/components/Head.vue';

Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate']);

@Component({
  components: {
    Head,
  },
})
export default class Car extends Sence {
  public letternumber: any = 'A'; //品牌首字母排序之当前选中位置
  public classifyshow: boolean = false; //搜索条件控制
  public goodsList: any = []; //车辆数据
  public selattr: any = ''; //提交筛选字符串
  public brankinfo: any = ''; //点击品牌车系数据
  // public cateid: any = "";//品牌车系分类id
  // public brand: any = ["不限品牌"];//品牌数据

  public brand: any = false; //品牌车系模态框显示隐藏参数,true显示false隐藏
  public brandchlid: any = false; //车系模态框显示隐藏参数,true显示false隐藏
  public brandList: any = []; //品牌车系数组(对象),
  public brandListToList: any = []; //品牌车系数组(转数组),
  public brandListchild: any = []; //当前选中品牌的车系数组
  public brandindex: any = -1; //当前选中品牌index
  public brandvalue: any = { mobile_name: '', id: '' }; //当前选中车系对象
  public backinfo: any = ''; // 品牌框返回数据

  // public brandindex: any = "";//当前品牌索引
  // public brandvalue: string = "";//当前选择品牌
  public cartype: any = ['不限车系']; //车系数据
  public cartypeindex: any = ''; //当前车系索引
  public cartypevalue: string = ''; //当前选择车系
  public priceindex: any = ''; //当前价格排序索引
  public pricevalue: string = '综合'; //价格排序默认文本显示
  public setparam: any = []; //车辆类别数据
  public catelist: any = []; //车辆品牌车系总数据
  public allstatus: any = []; //'全部'按钮状态
  public page: number = 1; //页码
  public size: number = 10; //页面记录数
  public total: number = 0; //当前分类车源数
  public options: object = {
    pullUpLoad: true,
  }; //上拉加载
  public mounted(): void {
    this.initlist();
  }

  //筛选数据
  // public getSelParam(): void {
  //     this.post("api/v1/getSelParam", {
  //         type:1,
  //         // is_used: 1,
  //         // cate_id:this.brandvalue.id,
  //     }).then((res: any) => {
  //         let data = res.data.set_param;
  //         for (let i = 0; i < data.length; i++) {
  //             for (let j = 0; j < data[i].values.length; j++) {
  //                 this.$set(data[i].values[j], "active", 0);
  //             }
  //         }
  //         this.setparam = data;
  //         this.brandList = res.data.cateList;
  //         this.catelist = res.data.cateList;
  //         // this.cityData=res.data.cateList;
  //         for (let i = 0; i < res.data.set_param.length; i++) {
  //             this.allstatus = [...this.allstatus, 1];
  //         }
  //         for (let i = 0; i < res.data.cateList.length; i++) {
  //             this.brand = [...this.brand, res.data.cateList[i].mobile_name];
  //             // this.cityData[i].name=this.cityData[i].initials
  //         }
  //     });
  // }

  public beforeRouteEnter(to: any, from: any, next: any): void {
    if (from.path != '/cardetail') {
      to.meta.isBack = true;
    } else {
      to.meta.isBack = false;
    }
    next();
  }

  public activated(): void {
    if (this.$route.meta.isBack) {
      this.initlist();
    }
  }

  public initlist(): void {
    this.classifyshow = false;
    this.page = 1;
    this.goodsList = [];
    this.priceindex = '';
    this.selattr = '';
    this.brankinfo = '';
    this.options = {
      pullUpLoad: true,
    };
    this.getSelParam(1);
    this.getGoodsList(1);
  }

  //筛选数据
  public getSelParam(type: number): void {
    this.post('api/v1/getSelParam', {
      type: type,
      // is_used: 1,
      // cate_id:this.brandvalue.id,
      parent_id: this.brankinfo ? this.brankinfo.id : '',
    }).then((res: any) => {
      let data = res.data.set_param;
      // for (let i = 0; i < data.length; i++) {
      //     for (let j = 0; j < data[i].values.length; j++) {
      //         this.$set(data[i].values[j], "active", 0);
      //     }
      // }
      this.setparam = data;
      this.brandList = res.data.cateList;
      const brandToList: any[] = [];

      this.catelist = res.data.cateList;
      this.backinfo = res.data.cateListOne;
      this.letternumber = 'A';

      this.$nextTick(() => {
        for (let key in this.brandList) {
          brandToList.push(this.brandList[key]);
        }
        this.brandListToList = brandToList;
      });
      // this.cityData=res.data.cateList;
      // for (let i = 0; i < res.data.set_param.length; i++) {
      //     this.allstatus = [...this.allstatus, 1];
      // }
      // for (let i = 0; i < res.data.cateList.length; i++) {
      //     this.brand = [...this.brand, res.data.cateList[i].mobile_name];
      //     // this.cityData[i].name=this.cityData[i].initials
      // }
    });
  }

  //品牌点击字母超链接滚动
  public scrollTo(key: any): void {
    this.letternumber = key;
    let top: any = -(window as any).document.getElementById(key).offsetTop;
    (this as any).$refs.brandModelScroll.scrollTo(
      0,
      top,
      1000
      // ease[this.scrollToEasing]
    );
  }

  // //品牌改变事件
  // public brandchange(value: any, index: number): void {
  //     this.cartype = ["不限车系"];
  //     if (index == 0) {
  //         this.brandindex = "";
  //     } else {
  //         for (let i = 0; i < this.catelist[index * 1 - 1].child.length; i++) {
  //             this.cartype = [...this.cartype, this.catelist[index * 1 - 1].child[i].mobile_name];
  //         }
  //         this.brandindex = index * 1 - 1;
  //     }
  //     this.cartypevalue = "";
  //     if (index == 0) {
  //         this.cateid = "";
  //     } else {
  //         this.cateid = this.catelist[this.brandindex].id;
  //     }
  // }
  //
  // //车系改变事件
  // public cartypechange(value: any, index: number): void {
  //     if (index == 0) {
  //         this.cartypeindex = "";
  //         if (this.brandindex === "") {
  //             this.cateid = "";
  //         } else {
  //             this.cateid = this.catelist[this.brandindex].id;
  //         }
  //     } else {
  //         this.cartypeindex = index * 1 - 1;
  //         this.cateid = this.catelist[this.brandindex].child[this.cartypeindex].id;
  //     }
  // }

  //价格排序改变事件
  public pricechange(value: any, index: number): void {
    switch (index) {
      case 0:
        this.priceindex = 1;
        break;
      case 1:
        this.priceindex = 4;
        break;
      case 2:
        this.priceindex = 3;
        break;
    }
    this.reGoodsList();
  }

  //筛选项选择
  public typechange(index: number, idx: number): void {
    for (let i = 0; i < this.setparam[index].values.length; i++) {
      this.setparam[index].values[i].active = 0;
    }
    this.setparam[index].values[idx].active = 1;
    this.allstatus[index] = -1;

    let data: any = [];
    for (let i = 0; i < this.setparam.length; i++) {
      for (let j = 0; j < this.setparam[i].values.length; j++) {
        if (this.setparam[i].values[j].active == 1) {
          data = [...data, this.setparam[i].values[j]];
        }
      }
    }
    this.selattr = JSON.stringify(data);
    this.reGoodsList();
  }

  //全部点击选中事件
  public allchange(index: number): void {
    for (let i = 0; i < this.setparam[index].values.length; i++) {
      this.setparam[index].values[i].active = 0;
    }
    this.allstatus[index] = 1;

    let data: any = [];
    for (let i = 0; i < this.setparam.length; i++) {
      for (let j = 0; j < this.setparam[i].values.length; j++) {
        if (this.setparam[i].values[j].active == 1) {
          data = [...data, this.setparam[i].values[j]];
        }
      }
    }
    this.selattr = JSON.stringify(data);
    this.reGoodsList();
  }

  //获取商品列表
  public getGoodsList(type: any): void {
    this.post('api/v1/getGoodsList', {
      sort: this.priceindex, //1默认#2销量最高#3车价最高#4车价最低
      sel_attr: this.selattr, //筛选json字符串
      // cate_id: this.cateid,//品牌车系id
      cate_id: this.brandvalue.id, //品牌车系id
      page: this.page,
      page_size: this.size,
      first_pay: '',
      month_pay: '',
      pay_price: '',
    }).then((res: any) => {
      this.goodsList = [...this.goodsList, ...res.data.goodsList];
      this.total = res.data.goodsPage.total;
      this.page += 1;
      if (res.data.goodsList.length < this.size) {
        this.options = {
          pullUpLoad: false,
        };
      }
      if (type == 1) {
        (this as any).$refs.scrollmain.scrollTo(
          0,
          0,
          0
          // ease[this.scrollToEasing]
        );
      }
    });
  }

  //刷新商品列表
  public reGoodsList(e: any = 0): void {
    if (e == 1) {
      this.classifyshow = true;
      this.getSelParam(1);
    }
    const toast = (<any>this).$createToast({
      time: 300,
      txt: '',
      type: 'loading',
    });
    toast.show();
    this.page = 1;
    this.options = {
      pullUpLoad: true,
    };
    this.post('api/v1/getGoodsList', {
      sort: this.priceindex, //1默认#2销量最高#3车价最高#4车价最低
      sel_attr: this.selattr, //筛选json字符串
      // cate_id: this.cateid,//品牌车系id
      // cate_id: this.brandvalue.id,//品牌车系id
      cate_id: this.brankinfo ? this.brankinfo.id : '', //品牌车系id
      page: this.page,
      page_size: this.size,
      first_pay: '',
      month_pay: '',
      pay_price: '',
    }).then((res: any) => {
      this.goodsList = res.data.goodsList;
      this.total = res.data.goodsPage.total;
      this.page += 1;
      if (res.data.goodsList.length < this.size) {
        this.options = {
          pullUpLoad: false,
        };
      }
    });
  }

  //前往汽车详情
  public godetail(id: number): void {
    this.$router.push(`/cardetail?id=${id}`);
  }

  public selectItem(item: any) {
    console.log(item);
  }

  public clickTitle(title: any) {
    console.log(title);
  }

  //显示关闭品牌车系模态框
  public brandclose(): void {
    if (this.brand) {
      this.brand = false;
    } else {
      this.brand = true;
      this.brankinfo = '';
      this.brandList = '';
      this.getSelParam(1);
      this.$forceUpdate();
      // setTimeout(() => {
      //     (<any> this).$refs.brandModelScroll.refresh();
      // }, 100);
      //     this.$nextTick(() => {
      //         (<any> this).$refs.brandModelScroll.refresh();
      // });
    }
  }

  //品牌车系模态框选择品牌并打开车系模态框
  // public brandclick(idx: number): void {
  //     let index: number = idx;
  //     if (this.brandchlid && this.brandindex == index) {
  //         this.brandchlid = false;
  //         this.brandindex = -1;
  //     } else {
  //         setTimeout(() => {
  //             (<any> this).$refs.brandChildScroll.refresh();
  //         }, 300);
  //         this.brandchlid = true;
  //         this.brandListchild = this.brandList[index].child;
  //         this.brandindex = index;
  //     }
  // }

  //品牌点击事件
  public brandclick(item: any): void {
    if (item.level < 4) {
      this.brankinfo = item;
      this.getSelParam(item.level + 1);
    } else {
      this.brankinfo = item;
      this.brand = false;
    }
  }

  //
  // //车系选择
  // public brandchildclick(idx: number): void {
  //     let index: number = idx;
  //     if (index > 0 || index == 0) {
  //         this.brand = false;
  //         this.brandchlid = false;
  //         this.brandvalue = this.brandListchild[index];
  //         this.brandindex = -1;
  //     } else {
  //         this.brand = false;
  //         this.brandchlid = false;
  //         console.log(this.brandList);
  //         console.log(this.brandindex);
  //         console.log(this.brandList[this.brandindex]);
  //         this.brandvalue = this.brandList[this.brandindex];
  //         this.brandindex = -1;
  //     }
  // }

  //返回上级
  public brandback(): void {
    console.log(this.backinfo);
    if (this.backinfo.p_level) {
      if (this.backinfo.p_parent_id) {
        this.brankinfo = {
          name: this.backinfo.p_parent_name,
          id: this.backinfo.p_parent_id,
        };
        this.getSelParam(this.backinfo.p_level);
      } else {
        this.brankinfo = { name: '', id: '' };
        this.getSelParam(1);
      }
    } else {
      this.brankinfo = { name: '', id: '' };
      this.brandclear();
    }
  }

  //不限品牌
  public brandclear(): void {
    // this.getSelParam(item.level + 1);
    this.brand = false;
    this.brandchlid = false;
    // this.brandvalue = {mobile_name: "", id: ""};
  }
}
</script>

<style scoped lang="stylus">
* {
  box-sizing: border-box;
}

.home-menu {
  position: absolute;
  top: 12px;
  right: 15px;
  height: 20px;
  width: 20px;
  z-index: 100;
}

.brand-link {
  position: fixed;
  height: fit-content !important;
  display: flex;
  flex-direction: column;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 10px;
  z-index: 11;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 100px;

  div {
    padding: 3px 6px;
    font-size: 0.9rem;
    color: #515151;
  }

  .active {
    color: #4876ff;
    font-weight: bold;
  }
}

.letter-title {
  background: #efeff2;
  color: #888;
  padding: 10px;
  text-align: left;
}

.line-active {
  border-bottom: 10px solid #f2f2f2 !important;
}

.color-active {
  color: #339933;
}

.search-input {
  width: 60vw;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  margin-right: 20px;
  background:#fff;
  text-align:left;
  overflow: hidden;
}

.brand-model {
  /* padding-top 45px */
  margin-top: 85px;
  box-sizing: border-box;
  top: 0;
  position: fixed;
  width: 100vw;
  height: calc(100vh - 85px);
  background: white;
  display: none;
  z-index: 11;
}

.brand-active {
  display: block;
}

.brand-head {
  position: fixed;
  top: 45px;
  background: white;
  width: 100vw;
  height: 40px;
}

.brand-head > div {
  text-align: center;
  line-height: 40px;
}

.brand-head-pic {
  top: 10px;
  left: 3vw;
  position: absolute;
  width: 18px;
  height: 18px;
}

.mine-list {
  background: white;
}

.mine-list-list-left {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #efeff4;
  padding: 10px 3vw;
}

.mine-list-list-left-name {
  margin-left: 10px;
  line-height: 22px;
  text-align: left;
}
.blod{
    font-weight:700;
}
.mine-list-list-left-img, .mine-list-list-left-img img {
  height: 25px;
  width: 25px;
}

.brand-child {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  max-height: 100vh;
  transition: 0.3s;
  z-index: 12;
  background: white;
  box-shadow: 0 0 10px #ccc;
}

.brand-child-active {
  width: 70vw;
}

.select-car {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  padding: 10px;
  background: #efeff2;
  z-index: 99;
}

>>> .cube-index-list-content {
  width: 100%;
}

.scroll-main {
  height: calc(100vh - 80px - 50px - 45px);
}

.car-search {
  height: 80px;
  display: flex;
  flex-direction: column;
  padding: 12px 15px;
  align-items: flex-start;
  background: #efeff4;
  justify-content: space-between;

  .search-title {
    font-size: 20px;
    font-weight: bold;
  }

  .search-body {
    width: calc(100vw - 30px);
    display: flex;
    flex-direction: row;
    align-items: center;

    .cube-select {
      width: 32vw;
      height: 30px;
      line-height: 10px;
      margin-right: 10px;
      border: 1px solid #333;
    }
  }

  .search-btn {
    width: 20vw;
    box-sizing: content-box;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background: #ff671a;
    color: white;
    padding: 7px 0;
  }
}

.classify-main {
  margin-top: 5px;
  background: #efeff4;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  padding: 0 15px 15px 15px;

  .classify-list {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    .classify-type-name {
      width: 80px;
      text-align: right;
      font-size: 16px;
      font-weight: bold;
      height: 25px;
      line-height: 27px;
    }

    .classify-type {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: calc(100vw - 30px - 80px);

      .classify-type-list {
        height: 25px;
        line-height: 27px;
        padding: 0 6px;
        margin-right: 5px;
        font-size: 16px;
        font-weight: bold;
        color: #4876ff;
      }

      .classify-type-active {
        background: #4876ff;
        color: white;
      }
    }
  }
}

.price-classify-main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  align-items: center;
  padding: 0 15px;
  background: #efeff4;

  .price-classify-title {
    font-size: 14px;
    font-weight: bold;
  }

  .price-classify-body {
    display: flex;
    flex-direction: row;
    align-items: center;

    .price-classify-title {
      font-size: 14px;
      font-weight: bold;
    }

    .cube-select {
      width: 33vw;
      height: 25px;
      line-height: 8px;
    }
  }
}

.car-main {
  display: flex;
  flex-direction: column;

  .car-list {
    position: relative;
    padding: 10px;
    display: flex;
    flex-direction: row;
    border-bottom: 3px solid #ccc;

    .car-pic {
      display: block;
      width: 20vw;
      height: 15vw;
    }

    .car-detail-btn {
      height: 25px;
      line-height: 27px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      background: red;
      color: white;
      width: 28vw;
      font-weight: bold;
      font-size: 12px;
      box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.24), inset 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

    .car-content {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .car-title {
        text-align: left;
        font-size: 18px;
        line-height: 24px;
        font-weight: bold;
        color: #4876ff;
      }

      .car-type {
        margin-top: 8px;
        color: #bbb;
        font-size: 14px;

        .car-type-name {
          color: black;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
